<template>
	<view class="content">
		<nav-top :showType='1'></nav-top>
		<view class="content-title">
			<view>
				实时流水
			</view>
			<view class="content-title-rt" @click="onClickRefresh">
				<image src="@/static/img/refresh.png" mode="widthFix"></image>
				<text>刷新</text>
			</view>
		</view>
		<view class="content-data">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<view class="item-data" v-for="(item,i) in orderList" :key="i">
						<view class="item">日期：{{item.createdAt}}</view>
						<view class="item">油枪：{{item.fuelNozzleName}}</view>
						<view class="item">班次：{{item.shiftName}}</view>
						<view class="item">员工：{{item.empName}}</view>
						<view class="item">容量：{{item.fuelQty}}</view>
						<view class="item">单价：{{item.originUnitPrice}}<text>(优惠：{{item.discountUnitPrice}})</text></view>
						<view class="item">金额：{{item.listAmount}} <text>(实付：{{item.amount}})</text></view>
						<!-- <view :class="['rt-pay', item.orderStatusId == 1 ? 'gray' : 'green']">{{item.orderStatusId == 1 ? '待支付' : '已支付'}}
						</view> -->
						<view :class="['rt-pay', item.orderStatusId == '1' ? 'green' : 'gray']"
							v-for="(val,index) in orderStatuList">
							<view v-if="item.orderStatusId == val.orderStatusId">{{ val.name }}</view>

						</view>
					</view>
				</van-list>
			</van-pull-refresh>
		</view>
	</view>
</template>

<script>
	import {
		onMounted,
		reactive,
		toRefs,
		watchEffect,
		watch
	} from 'vue'
	import NavTop from '@/components/NavTop.vue'
	import api from '@/api/order.js'
	import $store from "@/store";
	export default {
		props: {},
		components: {
			NavTop
		},
		setup(props, ctx) {
			const data = reactive({
				loading: false,
				finished: false,
				orderList: [],
				refreshing: false,
				maxPage: 2,
				pageSize: 10,
				pageIndex: 1,
				orderStatuList: [],
				total: 0,
			})
			watchEffect(() => {
				data.funcDatas = props.funcData
			})
			// 获取订单列表
			const getQueryHst = () => {
				api.queryHst({
					pageNum: data.pageIndex,
					pageSize: data.pageSize,
					gasStationId: $store.state.areaId,
				}).then((res) => {

					if (res.rows && res.rows.length > 1) {
						res.rows.forEach(val => {
							data.orderList.push(val)
						})
						data.maxPage = Math.ceil(res.total / data.pageSize);
						data.pageIndex++;
						data.total = res.total;
						data.loading = false;
					} else {
						data.finished = true;
					}
				})

			}
			// 点击刷新支付列表
			const onClickRefresh = () => {
				data.pageIndex = 1;
				data.orderList = [];
				data.finished = false;
				getQueryHst();
			}
			// 获取订单状态列表
			const getList = () => {
				api.list().then((res) => {
					data.orderStatuList = res.rows
				})
			}
			onMounted(() => {
				getList()
			})

			const onLoad = () => {
				if (!$store.state.areaId) return
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				// if (data.refreshing) {
				// 	data.pageIndex = 1;
				// 	data.orderList = [];
				// 	data.refreshing = false;
				// }
				console.log(22222, data.refreshing)
				getQueryHst()
				// 加载状态结束
				// data.loading = false;
				if (data.pageIndex >= data.maxPage) {
					data.finished = true;
				}
			};
			// 上拉加载
			const onRefresh = () => {
				// data.finished = false;
				// if (data.pageIndex <= data.maxPage) {
					console.log(33333)
				// }
				data.pageIndex = 1;
				data.orderList = [];
				getQueryHst();
				// data.refreshing = true
				// 清空列表数据
				data.finished = false;
				data.refreshing = false;
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				// data.loading = true;
				// onLoad();

			};
			watch($store.state, (newVal, oldVal) => {
				if (newVal.areaId) {
					data.pageIndex = 1;
					data.orderList = [];
					data.finished = false;
					console.log(44444)
					getQueryHst()
				}
			}, {
				deep: true
			})
			return {
				...toRefs(data),
				onClickRefresh,
				onLoad,
				onRefresh
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.content-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			text-indent: 20rpx;
			margin-top: 20rpx;

			.content-title-rt {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				text-align: left;
				margin-right: 40rpx;

				image {
					width: 22rpx;
					font-weight: 200;
					vertical-align: middle;
				}

				text {
					display: block;
					text-indent: 10rpx;
				}
			}
		}

		.content-data {
			width: 100%;
			height: calc(100vh - 190rpx);
			margin-top: 30rpx;
			padding: 0 20rpx;
			overflow-y: auto;
			box-sizing: border-box;
			padding-bottom: 20rpx;

			.item-data {
				position: relative;
				margin-top: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, .1);
				border-radius: 20rpx;
				font-size: 26rpx;

				.item {
					margin-top: 8rpx;
				}

				.rt-pay {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					font-size: 32rpx;
				}

				.gray {
					color: #ccc;
				}

				.green {
					color: rgb(0, 185, 107);
				}
			}
		}
	}
</style>